<template>
  <div class="vue2-demo">
    11111
    <h2>{{ title }}</h2>
    <p>计数器: {{ count }}</p>
    <button @click="increment">
      +1
    </button>
    <button @click="decrement">
      -1
    </button>
    <p v-if="isEven">
      当前计数为偶数
    </p>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-facing-decorator';

@Component
export default class Vue2Demo extends Vue {
  // Props定义
  @Prop({ type: String, default: 'Vue2 Class风格示例' })
  title!: string;

  // 数据定义
  count = 0;
  message = 'Hello Vue2';

  // 计算属性
  get isEven(): boolean {
    return this.count % 2 === 0;
  }

  // 生命周期钩子
  mounted() {
    console.log('组件已挂载', this.message);
    this.initialize();
  }

  // 方法定义
  initialize(): void {
    this.count = 0;
  }

  increment(): void {
    this.count++;
    this.$emit('count-change', this.count);
  }

  decrement(): void {
    this.count--;
    this.$emit('count-change', this.count);
  }

  // 监听器
  @Watch('count')
  onCountChange(newVal: number, oldVal: number) {
    console.log(`计数从${oldVal}变为${newVal}`);
  }
}
</script>

<style scoped>
.vue2-demo {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

button {
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>